<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件详解</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<comp1></comp1>
		</div>
		<template id="comp1">
			<fieldset id="">
				<legend><h2>组件1</h2></legend>
				<p>{{name}}</p>
				<button type="button" @click="click1" >按钮1</button>
			</fieldset>
		</template>
		<script type="text/javascript">
		/* 
		 组件本质上是一个可以复用的Vue实例，一个组件就是一个完整的生态系统，可以有自己的data，methods等
		 */
		
			let comp1={
				template:'#comp1',
				//设置数据源
				data(){
					return {
						name:"hello,comp1"
					}
				},
				methods:{
					click1(){
						alert("按钮被点击!")
					}
				}
			}
			
			new Vue({
				el:'#app',
				data:{
					/* 数据 */
					a:1
				},
				methods:{
					/* 方法 */
				},
				computed:{
					/* 计算属性 */
				},
				components:{
					/* 定义组件 */
					comp1:comp1
				}
			})
		</script>
	</body>
</html>
